<template>
  <div
    class="extend-system-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="system-profile">
      <div class="card-system">
        <div
          class="card-list"
          :class="[cardList.length <= 5 && 'flex-justify-center']"
        >
          <div class="card-item" v-for="(item, index) in cardList" :key="index">
            <div
              title="点击进入系统"
              class="card-warp"
              :class="[item.show && 'mouse']"
              @mouseenter="mouseUserOver(item, index)"
              @mouseleave="mouseOut(item, index)"
              @click="handleMenuClick(item)"
            >
              <div v-if="item.show" :class="[item.show && 'layer']"></div>
              <div class="main">
                <img :src="getUrl(item.image)" />
              </div>
              <div class="footer">
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
export default {
  name: "ExtendSystem",
  components: {
    ViewerImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      cardList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    mouseUserOver(item, index) {
      this.cardList[index].show = true;
    },
    mouseOut(item, index) {
      this.cardList[index].show = false;
    },
    handleMenuClick(item) {
      let { url } = item;
      window.open(url);
    },

    //
    getData() {
      axios
        .post(
          "/probusiness/expansionSystem/getList",
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.cardList = res?.data ?? [];
          this.cardList.forEach((v) => {
            this.$set(v, "show", false);
          });
        })
        .catch((_) => {
          this.cardList = [];
        });
    },
    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },
  },
};
</script>

<style lang="less" scoped>
.extend-system-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  .system-profile {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 102px 100px 20px 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .card-system {
      flex: 1;
      overflow: auto;
      .card-list {
        min-height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;

        .card-item {
          width: 20%;
          height: 238px;
          padding-right: 24px;
          padding: 0 24px 24px 0;
          box-sizing: border-box;
          .card-warp {
            height: 100%;
            width: 100%;
            background: url(~@/assets/img/portalEntry/system_icon_1.png)
              no-repeat center;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            padding: 10px 0 14px 5px;
            box-sizing: border-box;
            position: relative;
            .main {
              width: 304px;
              flex: 1;
              margin-bottom: 4px;
              background: linear-gradient(-135deg, transparent 10px, #0b3e53 0);
              overflow: hidden;
              img {
                height: 100%;
                width: 100%;
                transition: transform 0.3s ease; /* 平滑变化的动画效果 */
                border-top-right-radius: 23px; /* 右下角圆角 */
              }
            }
            .footer {
              width: 304px;
              height: 40px;
              background: url(~@/assets/img/portalEntry/system_icon_2.png)
                no-repeat center;
              background-size: 100% 100%;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: #e8fbff;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }

            &.mouse {
              cursor: pointer;
              background: url(~@/assets/img/portalEntry/system_icon_3.png)
                no-repeat center;
              background-size: 100% 100%;
              .footer {
                background: url(~@/assets/img/portalEntry/system_icon_4.png)
                  no-repeat center;
                background-size: 100% 100%;
              }
              .main {
                overflow: hidden;
                img {
                  border-top-right-radius: 23px;
                  transform: scale(1.1); /* 鼠标悬停时，图片放大1.1倍 */
                }
              }
            }
            .layer {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              z-index: 2;
              //   background-color: rgba(0, 0, 0, 0.2);
              transition: 0.3s;
              background: linear-gradient(
                    135deg,
                    transparent 0,
                    rgba(0, 0, 0, 0.2) 0
                  )
                  top left,
                linear-gradient(-135deg, transparent 10px, rgba(0, 0, 0, 0.2) 0)
                  top right,
                linear-gradient(-45deg, transparent 10px, rgba(0, 0, 0, 0.2) 0)
                  bottom right,
                linear-gradient(45deg, transparent 0, rgba(0, 0, 0, 0.2) 0)
                  bottom left;
              background-size: 50% 50%;
              background-repeat: no-repeat;
            }
          }
        }

        &.flex-justify-center {
          justify-content: center;
        }
      }
    }
  }
}
</style>
